<template>
	<view class="">
		<view class="content">
			<u-empty v-if="temporaryList.length == 0" mode="list" style="margin-top: 300rpx;"></u-empty>
			<view class="wait-item" v-for="(item, index) in temporaryList" :key="index" @click="toSubmit(item)">
				<view class="wait-item-top">
					<view class="wait-item-top-name">
						{{item.equipment.name}}
					</view>
					<view class="wait-item-top-code">
						{{item.equipment.code}}
					</view>
				</view>
				<view class="wait-item-location">
					设备位置：{{item.equipment.position}}
				</view>
				<view class="wait-item-location">
					类型：{{item.submitFormType == 'installation' ? '维修安装' : '维保'}}
				</view>
				<view class="wait-item-time">
					暂存时间：{{$u.timeFormat(item.timestamp, 'yyyy-mm-dd hh:MM:ss')}}
				</view>
				<view class="wait-item-bottom">
					<view class="wait-item-bottom-status">

					</view>
					<view class="wait-item-bottom-btn">
						<u-button type="primary" shape="circle" :custom-style="customStyle"
							@click.stop="deleteTem(item)">移除</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				temporaryList: [],
				customStyle: {
					height: '54rpx',
					marginLeft: '15rpx',
				}
			}
		},
		onShow() {
			this.listQuery()
		},
		methods: {
			listQuery() {
				this.temporaryList = uni.getStorageSync('temporaryList') || []
			},
			deleteTem(item) {
				let temporaryList = uni.getStorageSync('temporaryList') || []
				temporaryList = temporaryList.filter(filter =>
					filter.timestamp != item.timestamp
				)
				uni.setStorageSync('temporaryList', temporaryList)
				this.listQuery()
			},
			toSubmit(item) {
				if (item.submitFormType == 'installation') {
					uni.navigateTo({
						url: '/pages/installation/installation',
						success: function(res) {
							res.eventChannel.emit('installationData', {
								data: item
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/repair/repair',
						success: function(res) {
							res.eventChannel.emit('repairData', {
								data: item
							})
						}
					})
				}
			},
			toRepair(item) {
				uni.navigateTo({
					url: '/pages/repair/repair?id=' + item.id
				})
			},
			toInstallation(item) {
				uni.navigateTo({
					url: '/pages/installation/installation?id=' + item.id
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 32rpx 28rpx;


		.wait-item {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 28rpx;
			padding: 33rpx 32rpx 28rpx 37rpx;

			.wait-item-top {
				display: flex;
				align-items: center;

				.wait-item-top-name {
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
					margin-right: 20rpx;
				}

				.wait-item-top-code {
					line-height: 40rpx;
					border-radius: 6rpx;
					border: 1rpx solid #3068E7;
					font-weight: 400;
					font-size: 26rpx;
					color: #3068E7;
					text-align: center;
					padding: 0 12rpx;
				}
			}

			.wait-item-location {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 37rpx;
				margin-top: 20rpx;
			}

			.wait-item-time {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
				line-height: 37rpx;
				margin-top: 14rpx;
				margin-bottom: 28rpx;
			}

			.wait-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 28rpx;
				border-top: 1rpx solid #E6E6E6;

				.wait-item-bottom-status {
					font-weight: 400;
					font-size: 26rpx;
					color: #FEA03D;
					line-height: 37rpx;
				}

				.wait-item-bottom-btn {
					display: flex;
				}
			}
		}
	}
</style>